<template>
	<view class="ss">
		<view class="tupian">
			<!-- <image  class="responsive-image" src="../../../static/img-spxq@3x.png"></image> -->
		</view>
	<view class="zhuti">
		<view v-for="(item, index) in [xx]" :key="index" class="zhuti_01">
		      <view class="biaoti">
		        <text v-if="!editing" style="font-weight: bold; font-size: 20px;">{{item.sname}}</text>
		       <uni-easyinput v-else v-model="item.sname" class="edit-input" />
		      </view>
		      <view class="danwei">
		        <text style="font-weight: lighter;">商品单位:</text>
				<text v-if="!editing"></text>
		        <uni-easyinput v-else v-model="item.units" class="edit-input" />
		        <text v-if="!editing" class="danwei">{{item.units}}</text>
		      </view>
		      <view class="fenlei">
		        <text style="font-weight: lighter;">商品分类:</text>
				<text v-if="!editing"></text>
		        <uni-easyinput v-else v-model="item.tname" class="edit-input" />
		        <text v-if="!editing" class="fenlei">{{item.tname}}</text>
		      </view>
		      <view class="pinzhong">
		        <text style="font-weight: lighter;">商品品种:</text>
				<text v-if="!editing"></text>
		        <uni-easyinput v-else v-model="item.varietys" class="edit-input" />
		        <text v-if="!editing" class="pinzhong">{{item.varietys}}</text>
		      </view>
		      <view class="jianjie">
		        <text style="font-weight: lighter;">商品简介:</text>
				<text v-if="!editing"></text>
		        <uni-easyinput v-else v-model="item.introduces"  class="edit-input" />
		        <text v-if="!editing" class="jianjie">{{item.introduces}}</text>
		      </view>
			  
		    </view>
			
		    <view class="anniu">
		      <button v-if="!editing" @click="editItem(index)" class="xiugai">修改</button>
			  <button v-if="!editing"  @click="shanchu(index)" class="shanchu">删除</button>
		      <button v-if="editing" @click="saveItem(index)" class="baocun">保存</button>
		      <button v-if="editing" @click="cancelEdit(index)" class="quxiao">取消</button>
		    </view>
			<!-- 删除 -->
			<view v-if="showDialog" class="dialog">
			      <view class="dialog-content">
					  <view>
						  <text>确定要删除吗？</text>
					  </view>
					<view class="qrenshanchu">
						<button class="handleConfirm" style="width: 100rpx; height: 60rpx; font-size: 10px;" @click="handleConfirm">确认</button>
			        <button class="handleCancel" style="width: 100rpx; height: 60rpx; font-size: 10px;" @click="handleCancel">取消</button>
					</view>
			        
			      </view>
			   
			  </view>
	</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
// 控制删除框的显示和隐藏
const showDialog = ref(false);
  const editing=ref(false)
  const currentEditingIndex=ref(null)
	const xx=ref({
		sname:'绣花牛肉',
		units:'公斤',
		tname:'牛肉类',
		introduces:'好牛好牛好牛好牛好牛好牛好牛',
		varietys:'澳洲和牛'
	})
	const editItems = ref([]);
	const editItem=(index)=>{
		editing.value=true
	}
	const saveItem=(index)=> {
		  editing.value=false
	      // 这里可以添加保存逻辑，例如发送请求更新数据
	    }
		const cancelEdit=(index)=>{
			editing.value=false
			 // 可以在这里重置输入框的内容，如果需要的话
		}
		// 显示删除框
		const shanchu = () => {
		  showDialog.value = true;
		};
		
		// 处理确认删除的逻辑
		const handleConfirm = () => {
		  console.log('确认删除');
		  // 在这里添加删除逻辑
		  showDialog.value = false;
		};
		
		// 处理取消删除的逻辑
		const handleCancel = () => {
		  console.log('取消删除');
		  showDialog.value = false;
		};
		
</script>

<style lang="scss" scoped>
	.ss{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tupian{
		width: 100%; /* 父容器的宽度 */
		  height: 40%; /* 父容器的高度 */
	}
	.responsive-image {
	  width: 100%;
	  height: 100%;
	}
	.zhuti{
		width: 90%;
		height: 60%;
	}
	.zhuti_01{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.biaoti,.danwei,.fenlei,.pinzhong,.jianjie{
		 margin-top: 15px;
		 display: flex;
		 flex-direction: column;
	}
	.xiugai {
		/* 事件确定按钮 */
		background-color: #0496d9;
		color: white;
		width: 280rpx;
		
	}
	.anniu{
		
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.xiugai, .shanchu, .anniu button {
	     margin: 5rpx; /* 调整按钮之间的间距 */
	}
	.shanchu{
		/* 失败按钮 */
		margin-top: 100rpx;
		width: 280rpx;
		background-color: #15B54A;
		background: rgba(255, 0, 0, 0.5);
		color: #FF0000
	}
	.baocun{
				/* 已完成按钮 */
				margin-top: 100rpx;
				width: 280rpx;
				background-color: #15B54A;
				background: rgba(136, 217, 123, 0.3);
				color: #27c986
	}
	.quxiao{
		/* 失败按钮 */
		margin-top: 100rpx;
		width: 280rpx;
		background-color: #15B54A;
		background: rgba(255, 0, 0, 0.3);
		color: #FF0000
	}
	.dialog {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.dialog-content {
		border: 2rpx solid black;
		width: 500rpx;
	  background: white;
	  padding: 20px;
	  border-radius: 8px;
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	}
	.qrenshanchu{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	
	.dialog-content p {
	  margin-bottom: 10px;
	}
	
	.dialog-content button {
		
	  margin: 5px;
	  padding: 5px 10px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	}
	.handleConfirm{
				background-color: #0496d9;
					color: white;
	}
	.handleCancel{
			background-color: #e23633;
			color: white;
	}
</style>
